<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东柏瑞设计官网</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap/reset-global.css">
    <link rel="stylesheet" href="./bootstrap/website.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/xcxfk.css">
    <script src="./jquery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="box">
        <!-- 头部logo的div -->
        <div id="top">
            <div>
                <img src="./img/logo.png" alt="顶部logo">
            </div>
            <div class="more">
                <img src="./img/more.png" alt="更多" id="eye">
            </div>
            <div class="Telephone"><img src="./img/tu1.png" alt="联系电话18317093686">
                <span>咨询我们:</span> 18317093686
            </div>
            <!-- 缩小后的点击导航栏 -->
            <div id="zoe">
                <div><a href="./index.html">首页</a></div>
                <div><a href="./wzkf.html">网站开发</a></div>
                <div><a href="./makapp.html">APP开发</a></div>
                <div class="color_nav"><a href="./xcxkf.html">小程序开发</a></div>
                <div><a href="./anli.html">案例</a></div>
                <div><a href="./about-us.html">关于我们</a></div>
            </div>
        </div>

        <!-- nav导航栏 -->
        <div
            class="container d-flex justify-content-between align-items-center nav-container flex-wrap hezoe nav-position nav_width">
            <nav class="main--nav w-100">
                <ul class="d-flex justify-content-between">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./wzkf.html">网站开发</a></li>
                    <li><a href="./makapp.html">APP开发</a></li>
                    <li class="active-link"><a href="./xcxkf.html">小程序开发</a></li>
                    <li><a href="./anli.html">案例</a></li>
                    <li><a href="./about-us.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
        <!-- 轮播区域 -->
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./img/banner3.png" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
        <!-- 开发流程 -->
        <div class="Custom_process center">
            <p>开发流程</p>
            <p>专业技术团队，打造小程序开发品牌</p>
        </div>
        <!-- 开发流程图 -->
        <div class="center  process">
            <img src="./img/xcxicon1.png" alt="">
        </div>
        <div class="smallapp">
            <!-- 小程序定制 -->
            <div class="Custom_process center">
                <p>小程序制定</p>
                <p>专业技术团队，打造小程序开发品牌</p>
            </div>
            <div class="small center">
                <div class="s1 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon2.png" alt="">
                    <p>百度小程序</p>
                    <div>人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无需下载安装便可亨受指挥超前的使用体验。</div>
                </div>
                <div class="s2 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon3.png" alt="">
                    <p>微信小程序</p>
                    <div>微信小程序是微信生态的优先选择，微信倾力打造的小程序体系，将是微信生态的未来主旋律。从现在抓住风口.</div>
                </div>
                <div class="s3 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon4.png" alt="">
                    <p>支付宝小程序</p>
                    <div>支付宝小程序是一种全新的开放模式,它运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。</div>
                </div>
            </div>
            <div class="smalls center">
                <div class="s4 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon2.png" alt="">
                    <p>百度小程序</p>
                    <div>人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无需下载安装便可亨受指挥超前的使用体验。</div>
                </div>
                <div class="s4 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon3.png" alt="">
                    <p>微信小程序</p>
                    <div>微信小程序是微信生态的优先选择，微信倾力打造的小程序体系，将是微信生态的未来主旋律。从现在抓住风口.</div>
                </div>
                <div class="s4 wow animate__animated animate__fadeInUp">
                    <img src="./img/xcxicon4.png" alt="">
                    <p>支付宝小程序</p>
                    <div>支付宝小程序是一种全新的开放模式,它运行在支付宝客户端，可以被便捷地获取和传播，为终端用户提供更优的用户体验。</div>
                </div>
            </div>
        </div>
        <!-- 程序类代码 -->
        <div class="Custom_process center">
            <p>程序类</p>
            <p>专业技术团队，打造小程序开发品牌</p>
        </div>
        <!-- 程序类主体 -->
        <div class="program">
            <ul>
                <li class="xk">企业品牌</li>
                <li class="xk">新闻资讯</li>
                <li class="xk">时尚服务</li>
            </ul>
            <div class="zoe">
                <div class="one">
                    <img src="./img/xcxicon5.png" alt="" class=" wow animate__animated animate__fadeInUp">
                    <div class=" wow animate__animated animate__fadeInUp">
                        <p>企业品牌</p>
                        <div>
                            随石4G网络普及。各大小品牌都纷纷进驻移动互联网。而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在于机上观看并购买您的产品。
                        </div>
                    </div>
                </div>
                <div class="two">
                    <img src="./img/xcxicon6.png" alt="">
                    <div>
                        <p>新闻资讯</p>
                        <div>
                            越来越多的企业和商家进入了小程序市场拥有14亿用户流量、自带社交属性、高效沉淀用户、抢占市场先机，是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态方便快捷，功能丰富，场景丰富，速度快、不占内存，即用即走。
                        </div>
                    </div>
                </div>
                <div class="three">
                    <img src="./img/xcxicon7.png" alt="">
                    <div>
                        <p>时尚服务</p>
                        <div>
                            我们视用户为生命，他们的支持是我们得以存在的前题，我们将以此做为网站经营发展的准则，尽我们所能为用户提供真诚便捷的服务，提供质量可靠价格合理的商品，及时解答用户问题，记录用户建议，并进行售后跟踪以了解用户对商品的满意程度。该公司的产品无论在质量上还是价格、货期、信誉上都深得客户的广泛信任。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="programs">
            <ul>
                <li class="xks">企业品牌</li>
                <li class="xks">新闻资讯</li>
                <li class="xks">时尚服务</li>
            </ul>
            <div class="zoes">
                <div class="ones">
                    <img src="./img/xcxicon5.png" alt="" class=" wow animate__animated animate__fadeInUp">
                    <div class=" wow animate__animated animate__fadeInUp">
                        <p>企业品牌</p>
                        <div>
                            随石4G网络普及。各大小品牌都纷纷进驻移动互联网。而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在于机上观看并购买您的产品。
                        </div>
                    </div>
                </div>
                <div class="twos">
                    <img src="./img/xcxicon6.png" alt="">
                    <div>
                        <p>新闻资讯</p>
                        <div>
                            越来越多的企业和商家进入了小程序市场拥有14亿用户流量、自带社交属性、高效沉淀用户、抢占市场先机，是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态方便快捷，功能丰富，场景丰富，速度快、不占内存，即用即走。
                        </div>
                    </div>
                </div>
                <div class="threes">
                    <img src="./img/xcxicon7.png" alt="">
                    <div>
                        <p>时尚服务</p>
                        <div>
                            我们视用户为生命，他们的支持是我们得以存在的前题，我们将以此做为网站经营发展的准则，尽我们所能为用户提供真诚便捷的服务，提供质量可靠价格合理的商品，及时解答用户问题，记录用户建议，并进行售后跟踪以了解用户对商品的满意程度。该公司的产品无论在质量上还是价格、货期、信誉上都深得客户的广泛信任。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- foot部分 -->
        <div class="footer">
            <div class="footTop">
                <div class="footBig">
                    <div class="left">
                        <p>山东柏瑞设计有限公司</p>
                        <p>联系电话:18317093686</p>
                        <p>地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南）</p>
                    </div>
                    <div class="right">
                        <img src="./img/2vm.png" alt="">
                        <p>微信公众号</p>
                    </div>
                </div>
            </div>
            <div class="footFoot">Shandong Bairui Design Co., Ltd 山东柏瑞设计有限公司版权所有 鲁ICP备2021028094号-1</div>
        </div>
        <div class="foots">
            <p>山东柏瑞设计有限公司</p>
            <p>联系电话:18317093686</p>
            <p>地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南）</p>
            <img src="./img/2vm.png" alt="">
        </div>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./bootstrap/bootstrap.bundle.min.js"></script>
    <script src="./wow.min.js"></script>
    <script src="./js/xcxkf.js"></script>
    <script src="./jquery/jquery-3.6.0.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 30,
            freeMode: true,
            speed: 2000,
            autoplay: true,
            autoplay: {
                delay: 500
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
        swiper.el.onmouseover = function () {
            swiper.autoplay.stop();
        }
        swiper.el.onmouseleave = function () {
            swiper.autoplay.start();
        }
        var swiper = new Swiper(".mySwipers", {
            slidesPerView: 2.5,
            spaceBetween: 30,
            freeMode: true,
            speed: 2000,
            autoplay: true,
            autoplay: {
                delay: 1000
            },
            pagination: {
                el: ".swiper-paginations",
                clickable: true,
            },
        });
        swiper.el.onmouseover = function () {
            swiper.autoplay.stop();
        }
        swiper.el.onmouseleave = function () {
            swiper.autoplay.start();
        }

    </script>
</body>

</html>